<template>
	<view class="content">
		<view class="content_background bg-gradual-lightorange">
			<!-- <image class="image" :src="userBackground_url" mode=""></image> -->
		</view>
		<view class="content_info">
			<view class="userInfo_content" style="position: relative;">
				<view class="" style="position: absolute;right: 0;top: -20px;font-size: 10px;color: #666;">
					版本号：{{version}}
				</view>
				<view class="userInfo_avatar">
					<image class="image" :src="userData.headimg||'/static/images/default_avatar.png'" mode="aspectFit"></image>
				</view>
				<view class="userInfo_textInfo">
					<view class="userInfo_textInfo_nameT">
						{{userData.username||''}}
					</view>
					<view class="userInfo_textInfo_idT">
						{{ userData.id == undefined ? '' : 'ID: ' + userData.id }}
					</view>
				</view>
				<!-- <view class="userInfo_recharge" @click="clickToRecharge">充值</view> -->
			</view>
			
			<view class="userData_content">
				<template>
					<view class="userData_content_yongjiuInfo">
						<view class="info_numT">{{userData.ml_coin||0}}</view>
						<view class="info_desT">永久{{userData.coin_name||''}}</view>
					</view>
					<view class="userData_content_verticalLine"></view>
					<view class="userData_content_zengsong userData_content_yongjiuInfo">
						<view class="info_numT">{{userData.give_coin||0}}</view>
						<view class="info_desT">赠送{{userData.coin_name||''}}</view>
					</view>
				</template>
				<!-- #ifdef MP-WEIXIN || MP-KUAISHOU -->
				<view class="d-flex" style="height: 36px;" v-if="platform!='ios'||(userInfo.ios_payment==1)">
					<view class="d-flex rechargeBtn a-center j-center bg-gradual-orange-n rounded80" @tap.stop="toRecharge">
						<text class="d-flex text-white font-md">充值</text>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<view class="d-flex" style="height: 36px;">
					<view class="d-flex rechargeBtn a-center j-center bg-gradual-orange-n rounded80" @tap.stop="toRecharge">
						<text class="d-flex text-white font-md">充值</text>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
    import images from '@/utils/images'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
		},
		computed: {
			...mapState({
				continuous: state => state.user.continuous,
				userInfo: state => state.user.userInfo,
				statusBarHeight: state => state.layout.statusBarHeight,
				windowWidth: state => state.layout.windowWidth,
				windowHeight: state => state.layout.windowHeight,
				platform: state => state.layout.platform
			})
		},
		data() {
			return {
				version:uni.getStorageSync("diyversion")||null,
				userBackground_url: images.mine_userBackground,
				showRecharge:false
			}
		},
		created() {
			
		
		},
		props: {
			userData: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		methods: {
			toRecharge() {
				uni.navigateTo({
					url: '/pages/recharge/recharge'
				});
			},
		}
	}
</script>

<style lang="scss">
	.rechargeBtn{
		width:84px;
		height:36px;
		margin:0px 20rpx 0px 0px;
	}
	.content{
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		width: 100%;
		height: 460rpx;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		
		.content_background{
			width: 100%;
			height: 100%;
			.image{
				width: 100%;
				height: 100%;
			}
		}
		
		.content_info{
			position: absolute;
			width: 100%;
			height: 100%;
			
			.userInfo_content{
				display: flex;
				box-sizing: border-box;
				align-items: center;
				margin: 30px 20px;
				
				.userInfo_avatar{
					flex-shrink: 0;
					width: 140rpx;
					height: 140rpx;
					border-radius: 70rpx;
					border: 2rpx solid #ffffff;
					.image{
						width: 100%;
						height: 100%;
						border-radius: 100%;
					}
				}
				.userInfo_textInfo{
					display: flex;
					box-sizing: border-box;
					flex-direction: column;
					justify-content: center;
					width: 100%;
					height: 100%;
					margin-left: 20rpx;

					.userInfo_textInfo_nameT{
						font-size: 18px;
						color: #3D3D3D;
						margin-top: 3px;
						
					}
					.userInfo_textInfo_idT{
						font-size: 15px;
						color: #969696;
						margin-top: 10rpx;
						
					}
				}
				.userInfo_recharge{
					width: 180rpx;
					height: 50rpx;
					border-radius: 50rpx;
					line-height: 50rpx;
					margin-left: 10rpx;
					text-align: center;
					font-size: 14px;
					font-weight: 500;
					color: #3D3D3D;
					background: linear-gradient(to left, #E68B3E, #FFFFFF);
				}
			}
		}
		
		.userData_content{
			display: flex;
			box-sizing: border-box;
			height: 200rpx;
			margin: 0px 20px;
			border-radius: 10px;
			box-shadow: 0 0 10px 1px rgba(255, 139, 139, 0.2);
			background-color: white;
			align-items: center;
			
			.userData_content_yongjiuInfo{
				display: flex;
				box-sizing: border-box;
				flex-direction: column;
				width: 50%;
				justify-content: center;
				align-items: center;
				line-height: 25px;
				.info_numT{
					font-size: 25px;
					color: #3D3D3D;
				}
				.info_desT{
					font-size: 15px;
					color: #8C8C8C;
				}
			}
			.userData_content_verticalLine{
				display: flex;
				box-sizing: border-box;
				width: 1rpx;
				height: 100rpx;
				background-color: #D8D8D8;
			}
		}
	}
	
</style>